<!-- 本页样式 -->
<style scoped>
.del-dialog-cnt {
	font-size: 16px;
	text-align: center;
}
</style>
<!-- 页面布局-->
<template>
	<div class="table">
		<!-- 标题导航栏 -->
		<div class="title-box crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-tickets"></i>基础数据管理
				</el-breadcrumb-item>
				<el-breadcrumb-item>卡片版面管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 主体区 -->
		<div class="container">
			<!-- 查询条件 -->
			<div class="search-box">
				<div class="search-item-box">
					<table>
						<tr>
							<td>
								<i class="el-icon-search"></i>
							</td>
							<td class="search_td">
								<el-select v-model="parampters.isp" clearable placeholder="运营商">
									<el-option v-for="item in dicts.isp" :key="item.code" :label="item.name" :value="item.code">
									</el-option>
								</el-select>
							</td>
						</tr>
					</table>
				</div>
				<div class="search-button-box">
					<el-button type="primary" size="small" icon="search" @click="searchLoad">查询</el-button>
					<el-button type icon="add" size="small" @click="toAdd">新增</el-button>
					<el-button type size="small" icon="el-icon-download" @click="toExportExcel">导出&nbsp;Excel</el-button>
				</div>
			</div>
			<!-- 查询条件END -->
			<!-- 数据列表 -->
			<div class="grid-data-box">
				<el-table
					v-loading="tableLoading"
					:max-height="tableListHeight"
					:data="tableData"
					border
					:cell-class-name="changeColumnClass"
					:header-cell-style="{background:'#F3F3F3',color:'#606266'}"
					show-overflow-tooltip
					style="width: 100%"
					ref="multipleTable"
					@row-dblclick="clickToView"
				>
					<el-table-column type="index" label="序号" width="50" show-overflow-tooltip></el-table-column>
					<el-table-column prop="faceName" label="卡片版面描述" width="300" show-overflow-tooltip></el-table-column>
					<el-table-column label="图片名称" show-overflow-tooltip>
						<template slot-scope="scope">
							<div class="fxrow fxcc" style="justify-content: space-between;">
								<el-popover
									placement="right"
									width="230"
									trigger="hover">
									<img :src="scope.row.filePath" alt="" style="width:200px;height:auto;">
									<span slot="reference" style="color: #00978A; text-decoration: underline;">{{scope.row.fileName}}</span>
								</el-popover>
								<a :href="scope.row.filePath" :download="scope.row.fileName">
									<i class="el-icon-download" style="cursor:pointer;font-size:14px;" ></i>
								</a>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="isp" label="运营商" width="150" :formatter="formatter" show-overflow-tooltip></el-table-column>
					<el-table-column label="操作" width="200" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-button size="mini" @click="toUpd(scope.row)" type="primary">修改</el-button>
							<el-button size="mini" type="danger" @click="toDel(scope.row)" style="margin-left:5px">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 数据列表END -->
			<!-- 翻页导航条 -->
			<div class="navigate-box">
				<div class="pagination">
					<el-pagination
						background
						@current-change="handleCurrentChange"
						:total="parampters.totalCount"
						@size-change="handleSizeChange"
						:current-page.sync="parampters.pageIndex"
						:page-sizes="[20, 50, 100, 200]"
						:page-size="parampters.pageRows"
						layout="total, sizes, prev, pager, next"
					></el-pagination>
				</div>
			</div>
			<!-- 翻页导航条END -->
		</div>
		<!-- 主体区END -->
	</div>
</template>


<script>
import cardfaceupd from "./cardface_upd.vue"
export default {
	data() {
		return {
			// 筛选条件
			parampters: {
				//查询参数
				loginsid: "", //登录会话SID
				pageRows: 20, //每页行数
				pageIndex: 1, //当前页
				pageCount: 0, //总页数
				totalCount: 0, //总记录数
				isp: "", //运营商
			},
			// 查询出的表格数据
			tableLoading: true,
			tableData: [],
			//confirm提示信息弹框
			confirmBox: null,
			//所选记录id
			selectedId: "",
			//事物类型
			actType: "list",
			//字典集
			dicts: {}
		};
	},
	// 进入页面加载数据
	activated() {
		this.$set(this.parampters, "isp", "");
		this.handleInitLoad();
	},
	methods: {

		/**
		 * 组件初始化加载
		 */
		handleInitLoad() {
			this.initSelectOptoins();
			this.searchLoad();
		},

		/**
		 * 初始加载字典选项
		 */
		initSelectOptoins() {
			this.loadSelectOptoins("isp", null);
		},


		/**
		 * 通用定义:下拉字典
		 *  @augments dictKind 字典类型
		 */
		loadSelectOptoins(dictKind, params) {
			let url = "/rps/dictionary/";
			this.$axios
			.get(url, {
				params: {
					type: dictKind
				},
				headers:{
					operator: this.$util.getLoginer().userid,
					withCredentials: true
				}
			})
			.then(res => {
				let data = res.data;
				if (data.success) {
					this.$set(this.dicts, dictKind, data.data.list);
				} else {
					console.log(data.message);
					// this.$error( "查询失败" + data.message );
				}
			})
			.catch(err => {
				console.log(err);
			});
		},

		changeColumnClass(data) {
			if (data.columnIndex == 1 || data.columnIndex == 2) {
				return "tabcolumn_left";
			}
		},

		/**
		 * @augments  row 行所在的数据
		 * 表格数据列 内容字典转换
		 */
		formatter(row, column) {
			if (column.property == "isp") {
				return this.$dicts.transDict(this.dicts.isp, "code", "name", row.isp);
			}
		},

		/**
		 * @augments val 页码
		 * 切换页码操作
		 */
		handleCurrentChange(val) {
			this.parampters.pageIndex = val;
			// 重新获取当前页码的数据
			this.searchLoad();
		},

		/**
		 * @augments val 每页显示条数
		 * 每页显示条数修改
		 */
		handleSizeChange(val) {
			// 修改每页显示条数
			this.parampters.pageRows = val;
			// 重新获取数据
			this.searchLoad();
		},

		/**
		 * 条件筛选查询,加载数据
		 */
		searchLoad() {
			this.parampters = this.$util.trimObjStr(this.parampters);
			this.parampters.loginsid = this.$util.getLoginer().sessionId;
			this.tableLoading = true;
			this.$axios
				.get("/rps/cardFace/?"+new Date().getTime(), {
					params: this.parampters,
                    headers:{
                        operator: this.$util.getLoginer().userid,
                        withCredentials: true
                    }
				})
				.then(res => {
					let data = res.data;
					if (data.success) {
						this.tableData = data.data.list;
						this.tableLoading = false;
						this.parampters.pageIndex = data.data.pageNum!=undefined ? parseInt(data.data.pageNum):0;
						this.parampters.pageCount = data.data.totalPage!=undefined ? parseInt(data.data.totalPage):0;
						this.parampters.totalCount = data.data.count!=undefined ? parseInt(data.data.count) : 0;
					} else {
						this.tableLoading = false;
						this.$error( data.message );
					}
				})
				.catch(err => {
					this.tableLoading = false;
					console.log(err);
				});
		},

		/**
		 * 新增记录信息
		 */
		toAdd() {
			//页面参数
			var pageParam = {
				loginInfo: this.$util.getLoginer(),
				actType: "add",
				seleid: "-1"
			};
			let commDialog = this.$dialog.commDialog(
				"添加卡片版面信息",
				cardfaceupd,
				pageParam,
				"700px",
				"440px"
			);
			commDialog.exec.then(data => {
				this.searchLoad();
			});
		},

		/**
		 * 修改记录信息
		 * @augments index 编辑数据所在的行索引
		 * @augments row 编辑数据行的数据
		 */
		toUpd(row) {
			this.selectedId = row.cardFaceId;
			//页面参数
			var pageParam = {
				actType: "upd",
				seleid: this.selectedId
			};
			let commDialog = this.$dialog.commDialog(
				"编辑卡片版面信息",
				cardfaceupd,
				pageParam,
				"700px",
				"440px"
			);
			commDialog.exec.then(resp => {
				if (resp.type == "ok") {
					this.searchLoad();
				} else if (resp.type == "cancel") {
				}
			});
		},

		//
		clickToView(rowData, column, event) {
			this.toView(rowData);
		},

		/**
		 * 查看记录信息
		 * @augments row 编辑数据行的数据
		 * @augments ev
		 */
		toView(row) {
			this.selectedId = row.cardFaceId;
			//页面参数
			var pageParam = {
				actType: "view",
				seleid: this.selectedId
			};
			let commDialog = this.$dialog.commDialog(
				"查看卡片版面信息",
				cardfaceupd,
				pageParam,
				"700px",
				"440px"
			);
			commDialog.exec.then(data => {});
		},

				/**
		 * 删除记录信息
		 * @augments index 所在表格行的索引
		 * @augments row 所在表格行的所有数据对象
		 */
		toDel(row) {
			this.selectedId = row.cardFaceId;
			this.confirmBox = this.$dialog.confirm("确定删除所选记录吗？");
			this.confirmBox.exec.then(btnName => {
				if (btnName == "ok") {
					// 确定删除数据操作
					this.$axios
						.delete("/rps/cardFace/" + this.selectedId + "/", { 
							loginsid: this.$util.getLoginer().sessionId,
							userid: this.selectedId
						},{
							headers:{
								operator: this.$util.getLoginer().userid,
								withCredentials: true
							}
						})
						.then(res => {
							let data = res.data;
							if (data.success) {
								this.$dialog.close(this.confirmBox.vm);
								this.$message.success("删除成功");
								this.searchLoad();
							} else {
								this.$dialog.close(this.confirmBox.vm);
								this.$error( data.message );
							}
						}).catch(err => {
							this.$dialog.close(this.confirmBox.vm); // 取消删除数据操作
						});
				} else {
					this.$dialog.close(this.confirmBox.vm); // 取消删除数据操作
				}
			});
		},
		toExportExcel(){
			this.$axios
				.get("/rps/cardFace/export/", {
					params: this.parampters,
					headers: {
						operator: this.$util.getLoginer().userid,
						withCredentials: true
					}
				})
				.then(res => {
					let data = res.data;
					// 关闭提交表单的loading
					if (data.success) {
						let downloadUrl = data.data;
						let n = downloadUrl.split("/");
						var link = document.createElement('a');
						//设置下载的文件名
						link.download = n[ n.length-1 ];
						link.style.display = 'none';
						//设置下载路径
						link.href = downloadUrl;
						//浏览器兼容，禁止打开新的页面
						link.target = "_self";
						//触发点击
						document.body.appendChild(link);
						link.click();
						//移除节点
						document.body.removeChild(link);
					} else {
						this.$error(data.message);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
	}
};
</script>
